<template>
	<div class="userbox">
		<div class="formdata">
			<el-form :model="form" :rules="rules" ref="artworkForm" label-width="auto" label-position="right">
				<div class="left-side">
					<el-form-item :label="$t('artwork_data.name')" prop="name.en_US" >
						<el-input v-model="form.name.en_US" clearable :placeholder="$t('movie_data.form.en_US')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="&#12288;">
						<el-input v-model="form.name.ja_JP" clearable :placeholder="$t('movie_data.form.ja_JP')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="&#12288;">
						<el-input v-model="form.name.zh_CN" clearable :placeholder="$t('movie_data.form.zh_CN')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="&#12288;">
						<el-input v-model="form.name.zh_TW" clearable :placeholder="$t('movie_data.form.zh_TW')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item :label="$t('artwork_data.currency')+'/'+$t('artwork_data.price')" prop="price" >
						<div style="display: flex;justify-content: space-between;width:100%">
							<el-select style="margin-right: 50px;" v-model="form.currency" :placeholder="$t('formRule.selectPlaceholder')" :disabled="disabled||isEdit">
								<el-option
									v-for="item in currencyType"
									:key="item.value"
									:label="item.name"
									:value="item.value"
									>
								</el-option>
							</el-select>
							<el-input type="number" v-model="form.price" clearable min="50" max="1000000000" :placeholder="$t('formRule.inputPlaceholder')" :disabled="disabled||isEdit"></el-input>
						</div>
					</el-form-item>
					<!-- <el-form-item :label="$t('artwork_data.form.isTax')" prop="taxIncluded" >
						<el-radio v-model="form.taxIncluded" :label="true" :disabled="disabled||isEdit">{{ $t('table_data.yes') }}</el-radio>
						<el-radio v-model="form.taxIncluded" :label="false" :disabled="disabled||isEdit">{{ $t('table_data.no') }}</el-radio>
					</el-form-item> -->
					<el-form-item :label="$t('artwork_data.form.fxNum')" prop="issuesAmount" >
						<span v-if="form.issuesAmount==-1&&disabled">{{ $t('artwork_data.form.amount') }}</span>
						<el-input v-else type="number" v-model="form.issuesAmount" clearable :placeholder="$t('formRule.amountPlaceholder')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item :label="$t('artwork_data.startDate')" prop="saleStartTime" >
						<el-date-picker style="display: flex;justify-content: space-between;width:100%" v-model="form.saleStartTime" type="datetime"  value-format="YYYY-MM-DD HH:mm:ss"  :disabled="disabled" :editable="false" :placeholder="$t('formRule.selectPlaceholder')" :disabled-date="beforeOptions"></el-date-picker>
					</el-form-item>
					<el-form-item :label="$t('artwork_data.endDate')" prop="saleEndTime" >
						<el-date-picker style="display: flex;justify-content: space-between;width:100%" v-model="form.saleEndTime" type="datetime"  value-format="YYYY-MM-DD HH:mm:ss" :disabled="disabled" :editable="false" :placeholder="$t('formRule.selectPlaceholder')" :disabled-date="backOptions" :default-time="defaultTime"></el-date-picker>
					</el-form-item>
					<el-form-item :label="$t('artwork_data.preSaleDate')">
						<el-date-picker style="display: flex;justify-content: space-between;width:100%" v-model="form.preSaleTime" type="datetime"  value-format="YYYY-MM-DD HH:mm:ss" :disabled="disabled" :editable="false" :placeholder="$t('formRule.selectPlaceholder')" :disabled-date="preSaleOptions"></el-date-picker>
					</el-form-item>
					<el-form-item :label="$t('artwork_data.form.payWayLabel')" prop="paymentMode" >
						<el-radio v-model="form.paymentMode" :label=1 :disabled="disabled||isEdit">{{ $t('artwork_data.form.online') }}</el-radio>
						<el-radio v-model="form.paymentMode" :label=2 :disabled="disabled||isEdit">{{ $t('artwork_data.form.outline') }}</el-radio>
					</el-form-item>
					<el-form-item :label="$t('artwork_data.category')" prop="category" >
						<el-select v-model="form.category" :placeholder="$t('table_data.selectText')" :disabled="disabled||isEdit">
							<el-option
								v-for="item in classList"
								:key="item.value"
								:label="item.name"
								:value="item.value"
								>
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item :label="$t('artwork_data.form.isGift')" prop="isAddPresent" >
						<el-radio v-model="form.isAddPresent" :label="true" :disabled="disabled||isEdit">{{ $t('table_data.yes') }}</el-radio>
						<el-radio v-model="form.isAddPresent" :label="false" :disabled="disabled||isEdit">{{ $t('table_data.no') }}</el-radio>
					</el-form-item>
					<el-form-item :label="$t('artwork_data.form.artworklabel')" prop="selectArtwork" v-if="form.isAddPresent">
						<el-select v-model="form.selectArtwork" filterable multiple :filter-method="searchArtwork" :placeholder="$t('table_data.selectText')" :disabled="disabled||isEdit">
							<el-option
								v-for="item in artworkList"
								:key="item.id"
								:label="item.artworkName"
								:value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item :label="$t('artwork_data.form.codeTipsLabel')" prop="serialCodeRequired">
						<div style="display: flex;justify-content: space-between;width:100%">
							<el-switch v-model="form.serialCodeRequired" style="margin-right: 50px" :disabled="disabled||isEdit"></el-switch>
							<!-- <el-input v-if="form.serialCodeRequired" v-model="form.serialCodeRequired" clearable :placeholder="$t('artwork_data.form.codeLabel')" :disabled="disabled"></el-input> -->
						</div>
					</el-form-item>
					<el-form-item :label="$t('artwork_data.movieTitle')" prop="movieId" >
						<el-select v-model="form.movieId" filterable :filter-method="searchMovie" :placeholder="$t('artwork_data.movieTitle')" @change="changeName" clearable :disabled="disabled">
							<el-option v-for="item in movieData" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
						<!-- <el-input v-model="form.movieName" clearable :placeholder="$t('formRule.inputPlaceholder')" :disabled="disabled"></el-input> -->
					</el-form-item>
					<el-form-item :label="$t('artwork_data.form.saleLocale')" prop="saleLocale">
						<el-select v-model="form.saleLocale" :placeholder="$t('formRule.selectPlaceholder')" @change="changeLocale" :disabled="disabled">
							<el-option v-for="item in localeList" :key="item.country" :label="item[$i18n.locale]" :value="item.country">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item :label="$t('artwork_data.form.onlyLabel')" prop="uniqueness" >
						<el-select v-model="form.uniqueness" :placeholder="$t('formRule.selectPlaceholder')" :disabled="disabled||isEdit">
							<el-option
								v-for="item in onlyList"
								:key="item.value"
								:label="item.name"
								:value="item.value"
								>
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item :label="$t('artwork_data.form.royaLabel')" prop="royaltyRate">
						<el-input type="number" minlength="0.1" maxlength="100" v-model="form.royaltyRate" clearable :placeholder="$t('formRule.inputPlaceholder')" :disabled="disabled||isEdit"></el-input>
					</el-form-item>
					<el-form-item :label="$t('artwork_data.form.tc')" prop="genre" >
						<el-select v-model="form.genre" :placeholder="$t('formRule.selectPlaceholder')" :disabled="disabled||isEdit">
							<el-option
								v-for="item in typeList"
								:key="item.value"
								:label="item.name"
								:value="item.value"
								>
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item :label="$t('artwork_data.form.powLabel')" prop="rights" >
						<el-select v-model="form.rights" :placeholder="$t('formRule.selectPlaceholder')" :disabled="disabled||isEdit">
							<el-option
								v-for="item in powerList"
								:key="item.value"
								:label="item.name"
								:value="item.value"
								>
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item :label="$t('artwork_data.form.theatreChoice')" prop="theatreChoice">
						<el-button type="primary" @click="showTheatreClick">{{ $t('artwork_data.select') }}</el-button>
						<span style="color: rgb(107 107 107);margin-left: 10px;">{{ $t('artwork_data.selectNum',{num: form.theatreChoice&&form.theatreChoice.length}) }}</span>
						<!-- <el-select v-model="form.theatreChoice" filterable multiple :filter-method="searchTheatre" :disabled="disabled" :placeholder="$t('table_data.selectText')">
							<el-option
								v-for="item in theatreList"
								:key="item.value"
								:label="item.name"
								:value="item.value">
							</el-option>
						</el-select> -->
					</el-form-item>

					<!-- <div class="datebox">
						<div class="datebox_left">
							<el-form-item :label="$t('artwork_data.startDate')" prop="saleStartTime" >
								<el-date-picker v-model="form.saleStartTime" type="date" :disabled="disabled" :editable="false" value-format="YYYY-MM-DD" :placeholder="$t('formRule.selectPlaceholder')" :disabled-date="beforeOptions"></el-date-picker>
							</el-form-item>
						</div>
						<div class="datebox_right">
							<el-form-item :label="$t('artwork_data.endDate')" prop="saleEndTime" >
								<el-date-picker v-model="form.saleEndTime" type="date" :disabled="disabled" :editable="false" value-format="YYYY-MM-DD" :placeholder="$t('formRule.selectPlaceholder')" :disabled-date="backOptions"></el-date-picker>
							</el-form-item>
						</div>
					</div> -->
					<!-- <el-form-item :label="$t('artwork_data.status')" prop="status" >
						<el-select v-model="form.status" :placeholder="$t('formRule.selectPlaceholder')" :disabled="true">
							<el-option
								v-for="item in statusList"
								:key="item.value"
								:label="item.name"
								:value="item.value"
								>
							</el-option>
						</el-select>
					</el-form-item> -->
					<!-- <el-form-item :label="$t('artwork_data.form.isSell')" prop="isEnableResell" >
						<el-radio v-model="form.isEnableResell" :label="1" :disabled="disabled">{{ $t('table_data.yes') }}</el-radio>
						<el-radio v-model="form.isEnableResell" :label="0" :disabled="disabled">{{ $t('table_data.no') }}</el-radio>
					</el-form-item>
					<el-form-item :label="$t('table_data.sortLabel')" prop="artworkSort">
						<el-input type="number" v-model="form.artworkSort" clearable :placeholder="$t('formRule.inputPlaceholder')" :disabled="disabled"></el-input>
					</el-form-item> -->
				</div>
				<div class="right-side">
					<el-form-item :label="$t('artwork_data.form.filePage')" prop="thumbnailUrl" >
							<!-- <img :src="form.thumbnailUrl" v-if="disabled" class="head"> -->
							<sc-upload v-model="form.thumbnailUrl" :title="$t('user_data.uploadPage')" :disabled="disabled||showUpload" :action="action" @getFile="getFile" fileType="thumbnail" @onSuccess="headCallPoster" @handleRemove="handleRemove" width="500px" height="281px">
							<div v-if="showUpload" class="el-upload--picture-card" @click="openUpload" style="width: 100%;height: 100%;">
								<div class="file-empty">
									<el-icon style="width: 100%;"><el-icon-plus/></el-icon>
									<h4 style="color:#BB9B51">{{$t('user_data.uploadPage')}}</h4>
								</div>
							</div>
						</sc-upload>
						<!-- <sc-upload v-else v-model="image" :width="500" :height="281" :title="$t('user_data.uploadPage')" :autoUpload="autoUpload" :action="action" @getFile="getFile"></sc-upload> -->
					</el-form-item>
					<!-- <el-form-item :label="$t('artwork_data.form.creatorId')" prop="creatorId" >
						<el-select v-model="form.creatorId" filterable :filter-method="searchCreator" :placeholder="$t('formRule.selectPlaceholder')" @change="selectCreator">
							<el-option v-for="item in creatorIdList" :key="item.value" :label="item.name" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item> -->
					<!-- <el-form-item :label="$t('artwork_data.form.powLabel')" prop="rights" >
						<el-select v-model="form.rights" :placeholder="$t('formRule.selectPlaceholder')" :disabled="disabled">
							<el-option
								v-for="item in powerList"
								:key="item.value"
								:label="item.name"
								:value="item.value"
								>
							</el-option>
						</el-select>
					</el-form-item> -->
					<!-- <el-form-item :label="$t('artwork_data.form.watermark')" prop="isDefense" >
						<el-radio v-model="form.isDefense" :label="true" :disabled="disabled">{{ $t('table_data.yes') }}</el-radio>
						<el-radio v-model="form.isDefense" :label="false" :disabled="disabled">{{ $t('table_data.no') }}</el-radio>
					</el-form-item> -->
					<!-- <el-form-item :label="$t('artwork_data.form.file')" prop="fileUrl" >
						<el-icon v-if="disabled" class="icon"><component :is="icon" /></el-icon>
						<sc-upload-file v-else v-model="form.fileUrl" :title="$t('user_data.uploadPage')" :action="action" @getFile="uploadFile" @removeFile="removeFile" fileType="artwork" @onSuccess="headCallFile"></sc-upload-file>
					</el-form-item> -->
					<el-form-item :label="$t('artwork_data.form.file')" prop="fileId">
						<!-- <sc-upload-file v-if="form.category!=11" v-model="form.fileUrl" :title="$t('user_data.uploadPage')" :action="action" @getFile="uploadFile" @removeFile="removeFile" fileType="artwork" @onSuccess="headCallFile"></sc-upload-file> -->
						
						<sc-upload-file v-if="form.category!=11" ref="scuploadfile" v-model="form.fileId" :title="$t('user_data.uploadPage')" :disabled="disabled||isEdit" limit="1" :action="fileAction" @removeFile="removeFile(1)" fileType="artwork" @onSuccess="headCallOtherFile"></sc-upload-file>
						<div v-else>
							<el-icon v-if="disabled" class="icon"><component :is="icon" /></el-icon>
							<el-button v-else @click="openUploadFile('file')" type="primary">{{ form.fileId||form.ebookFiles&&form.ebookFiles.length?$t('artwork_data.form.ustips'):$t('artwork_data.form.utips') }}</el-button>
						</div>
					</el-form-item>
					<el-form-item :label="$t('artwork_data.form.previewFile')" v-if="form.category==11">
						<el-icon v-if="disabled" class="icon"><component :is="icon" /></el-icon>
						<el-button v-else @click="openUploadFile('preview')" type="primary">{{ form.previewFiles&&form.previewFiles.length?$t('artwork_data.form.ustips'):$t('artwork_data.form.utips') }}</el-button>
						<!-- <sc-upload-file v-else v-model="form.previewUrl" :title="$t('user_data.uploadPage')" :disabled="true" :action="action" @getFile="uploadFile" @removeFile="removeFile" fileType="artwork" @onSuccess="headCallFile">
							<div @click="openUploadFile('preview')">{{ form.previewFiles.length?$t('artwork_data.form.ustips'):$t('artwork_data.form.utips') }}</div>
						</sc-upload-file> -->
					</el-form-item>

					<el-form-item :label="$t('artwork_data.form.artworkDesc')" prop="description.en_US" >
						<el-input type="textarea" rows="6" resize="none" v-model="form.description.en_US" clearable :placeholder="$t('artwork_data.form.en_US')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="&#12288;">
						<el-input type="textarea" rows="6" resize="none" v-model="form.description.ja_JP" clearable :placeholder="$t('artwork_data.form.ja_JP')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="&#12288;">
						<el-input type="textarea" rows="6" resize="none" v-model="form.description.zh_CN" clearable :placeholder="$t('artwork_data.form.zh_CN')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item label="&#12288;">
						<el-input type="textarea" rows="6" resize="none" v-model="form.description.zh_TW" clearable :placeholder="$t('artwork_data.form.zh_TW')" :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item :label="$t('artwork_data.form.isBookLabel')" prop="isEnableCertificate" >
						<el-radio v-model="form.isEnableCertificate" :label="true" :disabled="disabled||isEdit">{{ $t('table_data.yes') }}</el-radio>
						<el-radio v-model="form.isEnableCertificate" :label="false" :disabled="disabled||isEdit">{{ $t('table_data.no') }}</el-radio>
					</el-form-item>
					<el-form-item :label="$t('artwork_data.form.bookLabel')" prop="certificateName">
						<el-input v-model="form.certificateName" clearable :placeholder="$t('formRule.inputPlaceholder')" :disabled="disabled||isEdit"></el-input>
					</el-form-item>

				</div>
			</el-form>
		</div>
		<!-- 海报 -->
		<sCDialog :modelValue="modelValue" :showFullscreen="false" @closeDialog="openUpload" :closeOnClickModal="false">
			<template v-slot:header>
				<div>
					<!-- 上传步骤 -->
				</div>
			</template>
			<div>
				<el-form :model="scDialogData" label-width="auto" label-position="right" style="display: block;">
					<el-form-item :label="$t('artwork_data.form.watermark')">
						<el-radio v-model="scDialogData.isDefense" :label="true" :disabled="disabled" @change="changeDef">{{ $t('table_data.yes') }}</el-radio>
						<el-radio v-model="scDialogData.isDefense" :label="false" :disabled="disabled" @change="changeDef">{{ $t('table_data.no') }}</el-radio>
					</el-form-item>
					<el-form-item :label="$t('artwork_data.form.compression')" >
						<el-radio v-model="scDialogData.compression" :label="true" :disabled="disabled" @change="changeDef">{{ $t('table_data.yes') }}</el-radio>
						<el-radio v-model="scDialogData.compression" :label="false" :disabled="disabled" @change="changeDef">{{ $t('table_data.no') }}</el-radio>
					</el-form-item>
					<el-form-item :label="$t('artwork_data.form.filePage')">
						<sc-upload v-model="scDialogData.newImg" :title="$t('user_data.uploadPage')" :isCompression="scDialogData.compression" :action="action" @getFile="getFile" fileType="thumbnail" @onSuccess="uploadSuccess" @handleRemove="delImg" width="500px" height="299px"></sc-upload>
						<div class="tips">{{ $t('components.upload.sizeTips') }}</div>
						<sc-cropper v-if="scDialogData.thumbnailUrl" :src="scDialogData.thumbnailUrl" compress="0.8" aspectRatio="0" ref="cropper" style="display: none !important;"></sc-cropper>
						<img :src="scDialogData.newImg" ref="wm" style="display: none;">
					</el-form-item>
				</el-form>
			</div>
			<template v-slot:footer>
				<el-button type="success" :disabled="!scDialogData.newImg" :loading="isSaveing" @click="upload">{{$t('table_data.saveText')}}</el-button>
			</template>
		</sCDialog>
		<!-- 文件 -->
		<sCDialog :modelValue="showFileDialog" :showFullscreen="false" @closeDialog="closeUploadPage" :closeOnClickModal="false" width="80%">
			<template v-slot:header>
				<div>
					<!-- 上传步骤 -->
				</div>
			</template>
			<div>
				<el-form :model="scDialogFileData" label-width="auto" label-position="right" style="display: block;">
					<el-form-item :label="$t('artwork_data.diypage')" v-if="scDialogFileData.isPreview">
						<el-radio v-model="scDialogFileData.isDIY" :label="true" :disabled="uploadFileStatus">{{ $t('table_data.yes') }}</el-radio>
						<el-radio v-model="scDialogFileData.isDIY" :label="false" :disabled="uploadFileStatus">{{ $t('table_data.no') }}</el-radio>
					</el-form-item>
					<el-form-item :label="$t('artwork_data.previewPage')" v-if="scDialogFileData.isDIY&&scDialogFileData.isPreview">
						<el-input v-model="scDialogFileData.page" type="number" step="1" min="1" @input="inputPage" :disabled="uploadFileStatus"></el-input>
					</el-form-item>
					<el-form-item :label="$t('artwork_data.form.compression')">
						<el-radio v-model="scDialogFileData.compression" :label="true" :disabled="uploadFileStatus">{{ $t('table_data.yes') }}</el-radio>
						<el-radio v-model="scDialogFileData.compression" :label="false" :disabled="uploadFileStatus">{{ $t('table_data.no') }}</el-radio>
					</el-form-item>
					<el-form-item :label="$t('formRule.defense_rule')" v-if="scDialogFileData.isPreview">
						<el-radio v-model="scDialogFileData.isDefense" :label="true" :disabled="uploadFileStatus">{{ $t('table_data.yes') }}</el-radio>
						<el-radio v-model="scDialogFileData.isDefense" :label="false" :disabled="uploadFileStatus">{{ $t('table_data.no') }}</el-radio>
					</el-form-item>
					<el-form-item :label="$t('artwork_data.form.filePage')" v-if="!scDialogFileData.isPreview">
						<sc-upload-file ref="scuploadfile" v-model="scDialogFileData.file" :title="$t('user_data.uploadPage')" :disabled="uploadFileStatus||isEdit" :limit="ebookLimit" :action="fileAction" @removeFile="removeFile(1)" fileType="artwork" @onSuccess="headCallFile"></sc-upload-file>
						<div class="scrollbox">
							<div class="scrollbox-item" v-for="(item,index) in scDialogFileData.imgFiles" :key="index">
								<div class="sortNuminput" v-if="showImg&&!scDialogData.isUploaded&&item.file">
									<label>{{ $t('artwork_data.sort') }}</label>
									<el-input v-model="item.key" type="number" style="width: 100px"></el-input>
								</div>
								<canvas v-if="!showImg" :id="'pdf_canvas_'+(index+1)" ></canvas>
								<img v-if="showImg" :src="item.img" class="uImg">
								<img v-if="showImg" :src="item.img" :ref="'uImg'+index" style="display: none;">
							</div>
						</div>
					</el-form-item>
					<el-form-item :label="$t('artwork_data.form.filePage')" v-else>
						<sc-upload-file v-model="scDialogFileData.previewFile" :title="$t('user_data.uploadPage')" :disabled="uploadFileStatus||isEdit" :limit="previewLimit" :action="fileAction" @removeFile="removeFile(0)" fileType="artwork" @onSuccess="headCallFile"></sc-upload-file>
						<div class="scrollbox">
							<div class="scrollbox-item" v-for="(item,index) in scDialogFileData.imgPreviewFiles" :key="index">
								<div class="sortNuminput" v-if="showImg&&!scDialogFileData.isUploadedFile&&item.file">
									<label>{{ $t('artwork_data.sort') }}</label>
									<el-input v-model="item.key" type="number" style="width: 100px"></el-input>
								</div>
								<canvas v-if="!showImg" :id="'pdf_canvas_'+(index+1)" ></canvas>
								<img v-if="showImg" :src="item.img" class="uImg">
								<img v-if="showImg" :src="item.img" :ref="'uImg'+index" style="display: none;">
							</div>
						</div>
					</el-form-item>
				</el-form>
			</div>
			<template v-slot:footer>
				<el-button v-if="showImg" type="info" :disabled="!(scDialogFileData.isPreview?scDialogFileData.imgPreviewFiles.length:scDialogFileData.imgFiles.length)||isEdit" :loading="uploadFileStatus" @click="sortImg">{{$t('artwork_data.sorted')}}</el-button>
				<span v-if="scDialogFileData.isPreview?scDialogFileData.imgPreviewFiles.length:scDialogFileData.imgFiles.length">{{ `${uploadingNum}/${scDialogFileData.isPreview?scDialogFileData.imgPreviewFiles.length:scDialogFileData.imgFiles.length}` }}</span>
				<el-button type="success" :disabled="!(scDialogFileData.isPreview?scDialogFileData.imgPreviewFiles.length:scDialogFileData.imgFiles.length)||isEdit" :loading="uploadFileStatus" @click="turnBlob(1,'click')">{{showCoutinueBtn?$t('table_data.coutinueText'):$t('table_data.saveText')}}</el-button>
			</template>
		</sCDialog>
		<div id="footer">
			<el-button v-if="!disabled" type="primary" :loading="isSaveing" @click="submit('')">{{$t('table_data.saveText')}}</el-button>
			<el-button v-if="!disabled" :loading="isSaveing" @click="submit('upload')" >{{$t('table_data.uploadText')}}</el-button>
			<el-button v-if="disabled" type="warning" size="large" icon="el-icon-view" @click="table_view(form.artworkId)">{{ $t('table_data.view') }}</el-button>
		</div>
		<div class="choseTheatreBox" v-if="showTheatre">
			<div class="contbox">
				<p class="title">{{ $t('artwork_data.chioseTitle') }}</p>
				<div class="selectbox">
					<div class="leftbox">
						<div class="topbox">
							<div class="stitle">{{ $t('artwork_data.theaterSelected') }}</div>
							<!-- <el-checkbox v-model="checked">{{ $t('artwork_data.theaterSelected') }}</el-checkbox> -->
							<el-icon v-if="disabled||!isEdit" @click="theatredList=[];selectAllTheatred=false;selectAll(false);"><component :is="oicon('el-icon-delete')" /></el-icon>
						</div>
						<div class="inputbox">
							<el-input v-model="theatredKey" :placeholder="$t('formRule.inputPlaceholder')" prefix-icon="el-icon-search" clearable @clear="searchTh(0)"></el-input>
							<el-button @click="searchTh(0)">{{ $t('table_data.searchText') }}</el-button>
						</div>
						<div class="list">
							<div class="item" v-for="(item,index) in theatredList" :key="index" :class="{hightlineClass: item.isLight}">
								<div class="name">{{ item.theatreName }}</div>
								<el-icon v-if="!disabled&&!isEdit" @click="delItem(index,item.theatreId)"><component :is="oicon('el-icon-close')" /></el-icon>
							</div>
						</div>
					</div>
					<div class="rightbox">
						<div class="topbox">
							<el-checkbox :disabled="disabled||isEdit" v-model="selectAllTheatred" @change="selectAll">{{ $t('artwork_data.theaterToBeSelected') }}</el-checkbox>
							<div class="num">{{ (selectedNum||0)+'/'+theatreList.length }}</div>
						</div>
						<div class="inputbox">
							<el-input v-model="theatreKey" :placeholder="$t('formRule.inputPlaceholder')" prefix-icon="el-icon-search" clearable @clear="searchTh(1)"></el-input>
							<el-button @click="searchTh(1)">{{ $t('table_data.searchText') }}</el-button>
						</div>
						<div class="list">
							<div class="item" v-for="(item,index) in theatreList" :key="index">
								<el-checkbox :disabled="disabled||isEdit" v-model="item.selected" @change="selectItem($event,item)">{{ item.name }}</el-checkbox>
								<!-- <div class="name">{{ item.name }}</div> -->
								<!-- <el-icon><component :is="oicon('el-icon-close')" /></el-icon> -->
							</div>
						</div>
					</div>
				</div>
			<div id="footer">
				<el-button :loading="isSaveing" @click="cancelTheatre" >{{$t('components.upload.cancel')}}</el-button>
				<el-button type="primary" :disabled="disabled||isEdit" :loading="isSaveing" @click="saveTheatre">{{$t('table_data.saveText')}}</el-button>
			</div>
			</div>
		</div>
	</div>
</template>

<script>
import localeData from "@/locales/countries"
import  {mixins } from '@/mixin/creatorArtwork'
import { uploadMixins } from '@/mixin/uploadMixins'
import sCDialog from "@/components/scDialog"
import scCropper from '@/components/scCropper'
import draggable from 'vuedraggable'

	export default {
		emits: ['success', 'closed'],
		components: {
			sCDialog,
			scCropper,
			draggable
		},
		mixins: [mixins,uploadMixins],
		computed: {
			icon() {
				return () => {
					const dUrl = decodeURIComponent(this.form.fileUrl);
					const str = dUrl.split('?')[0].split('.');
					console.log('fileType',str[str.length-1]);
					const type = str[str.length-1];
					if(type){
						if(['jpg','jpeg','png','gif','webp','tiff','bmp','heif','svg'].includes(type)){
							return 'sc-icon-img'
						}else if(['mp3','wma','ape'].includes(type)){
							return 'sc-icon-mp3'
						}else if(['mp4','mp5','avi','wmv'].includes(type)){
							return 'sc-icon-video'
						}else if(['pdf','txt','xlsx'].includes(type)){
							return 'sc-icon-pdf'
						}else{
							return 'sc-icon-none'
						}
					}
					return 'sc-icon-none'
				}
			},
			oicon(){
				return function(e){
					return e
				}
			},
		},
		mounted(){
			this.disabled = this.$route.query.type=='detail'?true:false;
			this.$store.commit("updateViewTagsTitle", this.disabled?this.$t('menu.artworkDetail'):this.$t('menu.artworkEdit'))
			if(this.$route.query.id != 'add'){
				this.getInfo();
			}else{
				this.getTheatre();
			}
			this.getArtwork()
			this.getLocale()
			this.searchMovie('searchAll')
		},
		methods: {
			cancelTheatre(){
				this.showTheatre=false;
				this.theatredList=[];
				// this.selectAll();
				this.selectAllTheatred=false
			},
			showTheatreClick(){
				this.showTheatre = true
				if(!this.form.theatreChoice || !this.form.theatreChoice.length){
					this.selectAll(false)
					return
				}
				if(this.form.theatreChoice&&this.form.theatreChoice.length&&!this.theatredList.length){
					for(let i=0;i<this.theatreList.length;i++){
						for(let t=0;t<this.form.theatreChoice.length;t++){
							if(this.theatreList[i].value == (this.form.theatreChoice[t].theatreId||this.form.theatreChoice[t])){
								this.theatreList[i].selected = true;
								this.selectItem(true,this.theatreList[i])
								break;
							}else{
								this.theatreList[i].selected = false;
							}
						}
					}
				}
			},
			// 预览
			table_view(id=''){
				window.open(process.env.VUE_APP_WEBSITE + '/movie-detail-view?id=' + id)
				// this.showArtwork = true
			},
			searchTh(e){
				if(e==0&&!this.theatredKey){
					for(let i=0;i<this.theatredList.length;i++){
						this.theatredList[i].isLight = false;
					}
					return
				}
				if(e==1&&!this.theatreKey){
					this.selectedNum = 0;
					this.selectAllTheatred = false
					this.getTheatre()
					return
				}
				if(e == 0){
					// let arr = this.theatredList.filter(n=>n.theatreName.includes(this.theatredKey));
					for(let i=0;i<this.theatredList.length;i++){
						if(this.theatredList[i].theatreName)this.theatredList[i].isLight = this.theatredList[i].theatreName.includes(this.theatredKey)?true:false;
					}
				}else{
					this.selectedNum = 0;
					this.selectAllTheatred = false
					this.getTheatre(this.theatreKey)
				}
			},
			saveTheatre(){
				this.form.theatreChoice =  JSON.parse(JSON.stringify(this.theatredList.map(n=>(n.theatreId))));
				this.showTheatre = false;
				console.log(this.form.theatreChoice)
			},
			delItem(e,id){
				this.theatredList.splice(e,1)
				let item = this.theatreList.find(n=>n.value==id)
				if(item){
					item.selected = false
				}
			},
			selectItem(e,item){
				if(e){
					this.selectedNum += 1;
					if(this.theatredList.findIndex(n=>n.theatreId==item.value)==-1)this.theatredList.unshift({theatreName: item.name, theatreId: item.value})
				}else{
					this.selectedNum -= 1;
					this.delItem(this.theatredList.findIndex(n=>n.theatreId==item.value),item.value)
				}
			},
			selectAll(e){
				this.theatreList = this.theatreList.map(n=>({
					...n,
					selected: e
				}))
				this.selectedNum = 0;
				if(e){
					this.selectedNum = this.theatreList.length;
					for(let i=0;i<this.theatreList.length;i++){
						if(this.theatredList.findIndex(n=>n.theatreId==this.theatreList[i].value)==-1)this.theatredList.push({theatreName: this.theatreList[i].name, theatreId:this.theatreList[i].value})
					}
					// console.log(111111,this.theatredList)
				}else{
					this.theatredList = []
				}
			},
			changeLocale(e){
				this.form.saleLocale = e;
			},
			async searchCountry(value){
				let arr = this.localeList;
				this.localeList = arr.filter(n=>n.name.includes(value))
			},
			async getLocale(){
				this.localeList = this.localeList.concat(localeData||[])
				
			},
			selectCreator(e){
				this.form.creatorId = e;
			},
			changeName(value){
				this.form.movieId = value;
			},
			searchMovie(value){
				if(value&&!/^\s/g.test(value)){
					setTimeout(async () => {
							let params = {
								pageNum: 1,
								pageSize: 10,
								keyword: value=='searchAll'?'':value
							}
							const res = await this.$API.artwork.getMovie.get(params);
							if(res.data.list.length){
								this.movieData = res.data.list.map(n=>({
									label: n.title,
									value: n.id
								}));
								if(this.movieData.findIndex(n=>n.value==this.form.movieId)==-1&&this.form.movieName){
									this.movieData.push({label: this.form.movieName[this.$i18n.locale],value: this.form.movieId})
								}
							}
					}, 1000)
				}
			},
			async searchTheatre(e,type=''){
				// setTimeout(async () => {
					if(type=='artwork'){
						this.getArtwork(e)
					}else{
						this.getTheatre(e)
					}
				// },1000)
			},
			searchArtwork(e){
				this.searchTheatre(e,'artwork')
			},
			async getArtwork(value=''){
				const params = {
					pageNum: 1,
					pageSize: 10,
					keyword: value
				}
				const res = await this.$API.creator_artwork.getArtwrokData.get(params)
				this.artworkList = res.data.list||[]
				
			},
			async getTheatre(value=''){
				const params = {
					pageNum: 1,
					pageSize: 100,
					keyword: value
				}
				const res = await this.$API.creator_artwork.getTheatreData.get(params)
				this.theatreList = res.data.content.map(n=>({
					value: n.theatreId,
					name: n.theatreName,
					selected: this.theatredList.findIndex(q=>q.theatreId==n.theatreId)!=-1?true:false
				}))
				this.selectedNum = this.theatredList.length
			},
			// handleRemove(){
			// 	this.form.thumbnailId = null;
			// },
			// headCallPoster(res){
			// 	this.form.thumbnailId = res.data.file_id;
			// 	this.$message.success(this.$t('table_data.operasucc'))
			// },
			// headCallFile(res){
			// 	this.form.fileId = res.data.file_id
			// 	this.$message.success(this.$t('table_data.operasucc'))
			// },
			// removeFile(){
			// 	this.form.fileUrl = null;
			// 	this.form.fileId = null;
			// },
			closeTag(){
				const tagList = this.$store.state.viewTags.viewTags;
				const tag = this.$route;
				const nowTagIndex = tagList.findIndex(item => item.fullPath == tag.fullPath)
				this.$store.commit("removeViewTags", tag)
				this.$store.commit("removeIframeList", tag)
				this.$store.commit("removeKeepLive", tag.name)

				const leftView = tagList[nowTagIndex - 1]
				if (leftView) {
					this.$router.push(leftView)
				} else {
					this.$router.push('/')
				}
			},
			// uploadFile(file){
			// 	if(file.url)return
			// 	this.form.fileUrl = file.raw;
			// },
			async getInfo(){
				let id = this.$route.query.id;
				const res = await this.$API.creator_artwork.artWorkDetail.get(id);
				this.form = res.data;
				this.showUpload = false
				if(this.form.status==5&&this.$route.query.type != 'copy'){
					this.isEdit = true
				}
				if(this.$route.query.type == 'copy'){
					this.form.artworkId = '';
					this.form.thumbnailUrl = '';
					this.form.ebookFiles = '';
					this.form.fileId = '';
					this.form.thumbnailId = '';
					this.showUpload = true;
					this.form.status = null;
				}
				this.image = this.form.thumbnailUrl;
				if(this.form.issuesAmount==-1)this.form.issuesAmount = null;
				// this.form.movieName = this.form.movieName[this.$i18n.locale]
				// this.form.creatorName = this.form.creatorName[this.$i18n.locale]
				this.form.isEnableResell = this.form.isEnableResell?1:0
				this.theatredList = JSON.parse(JSON.stringify(this.form.theatreChoice));
				this.getTheatre();
				
				// if(this.form.fileId){
					// this.scDialogFileData.imgFiles = this.form.ebookFiles&&this.form.ebookFiles.length?this.form.ebookFiles:[this.form.fileUrl]
					// this.scDialogFileData.file = 'ebookFile.pdf'
					// this.form.showImg = true
					// this.scDialogData.isUploaded=true
				// }

				// if(this.form.previewFiles&&this.form.previewFiles.length)this.scDialogFileData.isUploadedFile=true
				
				if(![11,12,13,14,21,15].includes(this.form.category))this.form.category=29
			},
			//显示
			open(mode='add'){
				this.mode = mode;
				this.visible = true;
				return this;
			},
			//表单提交方法
			submit(type){
				this.$refs.artworkForm.validate(async (valid) => {
					if (valid) {
						this.form.thumbnailUrl = ''
						this.isSaveing = true;
						// this.uploadForm.movie_id = this.form.movieId;
						// this.uploadForm.start_date = this.$TOOL.getLocalTime(9,this.form.startDate,true)//dateFormat(this.form.startDate,'yyyy-MM-dd');
						// this.uploadForm.end_date = this.$TOOL.getLocalTime(9,this.form.endDate,true)// .dateFormat(this.form.endDate,'yyyy-MM-dd');
						// this.uploadForm.officialSiteName = this.form.officialSiteName;
						// this.uploadForm.official_site = this.form.officialSite;
						// this.uploadForm.title = JSON.stringify(this.movieTitle);
						// if(!this.uploadForm.image)this.uploadForm.image = this.form.image;
						// this.uploadForm.information = JSON.stringify(this.movieDesc);
						const form = {};
						for(let i in this.form){
							if(this.form[i])form.i = this.form.i
						}
						Object.assign(form,this.form);
						if(this.form.category!=11)form.ebookFiles = [this.form.fileId]
						form.certificateName = this.form.certificateName;
						// form.saleStartTime = new Date(this.form.saleStartTime).getTime()//this.$TOOL.getLocalTime(9,this.form.saleStartTime,true)-this.$TOOL.dateFormat(this.form.saleStartTime)
						// form.saleEndTime = new Date(this.form.saleEndTime).getTime();//this.$TOOL.getLocalTime(9,this.form.saleEndTime,true)
						// form.preSaleTime = new Date(this.form.preSaleTime).getTime()
						if(type=='upload')form.status = this.form.status = 3
						if(!type)form.status = this.form.status = 1
						if(form.theatreChoice&&form.theatreChoice[0]&&form.theatreChoice[0].theatreId)form.theatreChoice = form.theatreChoice.map(n=>n.theatreId)
						let api = this.$API.creator_artwork.artWorkCreate;
						if(this.form.artworkId)api=this.$API.creator_artwork.artWorkUpload
						form.isTaxIncluded = true;
						var res = await api.post(form);
						this.isSaveing = false;
						if(res.code == 'OK'){
							this.$emit('success', this.form, this.mode)
							this.$message.success(this.$t('table_data.operasucc'))
							this.closeTag();
						}else{
							this.$alert(res.message, this.$t('table_data.tips'), {type: 'error'})
						}
					}
					console.log('data',this.form)
				})
			},
			beforeOptions(v){
				if(!this.form.saleEndTime)return false
				return v.getTime() > new Date(this.form.saleEndTime).getTime();//  - 86400000是否包括当天
			},
			backOptions(v){
				return v.getTime() < new Date(this.form.saleStartTime).getTime();//  - 86400000是否包括当天
			},
			preSaleOptions(v){
				return v.getTime() > new Date(this.form.saleStartTime).getTime();//  - 86400000是否包括当天
			}
		}
	}
</script>

<style scoped>
.userbox {
	background: #fff;
	padding: 30px;
	margin: 16px;
	border: 1px solid #CCCCCC;
	border-radius: 4px;
}
.el-form {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
:deep .el-upload-list {
	max-height: 150px;
  overflow-y: scroll;
}
.scrollbox {
	width: 100%;
	overflow-y: scroll;
	display: flex;
	max-height: 700px;
	flex-wrap: wrap;
}
.scrollbox-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	border: 1px solid #eee;
	margin: 0 10px 10px 0;
}
.sortNuminput {
	display: flex;
}
/* .scrollbox div {
	margin-right: 10px;
} */
.scrollbox .uImg {
	width: 200px;
	height: auto;
	/* height: 400px; */
  /* object-fit: contain; */
}
.left-side, .right-side {
	width: 46%;
}
.uploadbtn {
	cursor: pointer;
}
.uploadbtn:hover {
	color: var(--el-color-primary);
}
.item {
	width: 100%;
	display: flex;
	align-items: flex-start;
}
.tips {
	color: #888;
	font-size: 14px;
}
.datebox {
	width: 100%;
	display: flex;
	justify-content: flex-start;
}
.datebox_left,.datebox_right {
	width: 50%;
}
.item-right {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	height: 118px;
}
.el-form-item {
	width: 100%;
}
.leftlabel {
	width: 120px;
}
.el-select {
	width: 100%;
}
.item-lastName {
	display: flex;
	justify-content: space-between !important;
	align-content: space-between !important;
	/* height: 200px; */
	width: 100%;
	margin-bottom: 18px;
}
.item-desc {
	/* height: 500px; */
}
.choseTheatreBox {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.6);
	z-index: 9;
	display: flex;
	justify-content: center;
	align-items: center;
}
.choseTheatreBox .contbox {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	background: #fff;
	padding: 14px;
	width: 80%;
  max-height: 80%;
  min-height: 80%;
	overflow-y: scroll;
}
.choseTheatreBox .contbox .title {
	width: 100%;
	text-align: left;
	font-size: 25px;
}
.choseTheatreBox .contbox .selectbox {
	display: flex;
	justify-content: space-between;
	width: 100%;
	margin-top: 20px;
	height: 88%;
}

.choseTheatreBox .contbox .selectbox .leftbox {
	width: 29%;
	border: 1px solid #eee;
	/* padding: 10px; */
	height: 100%;
}
.choseTheatreBox .contbox .selectbox .rightbox {
	width: 69%;
	border: 1px solid #eee;
	/* padding: 10px; */
	height: 100%;
}
.choseTheatreBox .contbox .selectbox .leftbox .topbox {
	display: flex;
	justify-content: space-between;
	font-size: 22px;
	align-items: center;
  margin-bottom: 8px;
	background: #F6F8F9;
  padding: 14px 10px;
}

.choseTheatreBox .contbox .selectbox .leftbox .topbox .stitle {
	/* font-size: 18px; */
  color: #494949;
}
.choseTheatreBox .contbox .selectbox .leftbox .inputbox{
	padding: 0 10px;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.choseTheatreBox .contbox .selectbox .leftbox .list{
	padding: 0 10px;
	margin-bottom: 20px;
	height: 85%;
  overflow-y: scroll;
}
.choseTheatreBox .contbox .selectbox .leftbox .list .item{
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 18px;
	/* margin-bottom: 8px; */
	padding: 5px 0;
	cursor: pointer;
}
.choseTheatreBox .contbox .selectbox .leftbox .list .item .el-icon{
	color: red;
}
.choseTheatreBox .contbox .selectbox .leftbox .list .item:hover{
	background: #eee;
}
.hightlineClass {
	background: #7c7cff;
}


.choseTheatreBox .contbox .selectbox .rightbox .topbox {
	display: flex;
	justify-content: space-between;
	font-size: 26px;
	align-items: center;
  margin-bottom: 8px;
	background: #F6F8F9;
  padding: 14px 10px;
}

.choseTheatreBox .contbox .selectbox .rightbox .topbox {
	font-size: 22px;
	color: #888;
}
.choseTheatreBox .contbox .selectbox .rightbox .inputbox{
	padding: 0 10px;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.choseTheatreBox .contbox .selectbox .rightbox .list{
	padding: 0 10px;
	margin-bottom: 20px;
	display: flex;
  flex-wrap: wrap;
	overflow-y: scroll;
  height: 85%;
	align-content: flex-start;
}
.choseTheatreBox .contbox .selectbox .rightbox .list .item{
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 18px;
	/* margin-bottom: 8px; */
	padding: 5px 0;
	cursor: pointer;
	flex: 0 0 32%;
}
.choseTheatreBox .contbox .selectbox .rightbox .list .item label{
	width: -webkit-fill-available;
}
.choseTheatreBox .contbox .selectbox .rightbox .list .item .el-icon{
	color: red;
}
.choseTheatreBox .contbox .selectbox .rightbox .list .item:hover{
	background: #eee;
}


.icon {
	width: auto;
  height: 40px;
}
.item-right{
	height: 140px;
}
.head {
	width: 500px;
  height: 281px;
}
.background {
	width: 500px;
	height: 300px;
}
.rightInput {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-content: space-between;
	width: 100%;
}
.textarea {
	height: 600px;
}
.item-right-form {
	display: flex;
}
.item>div:nth-child(2){
	margin-left: 200px;
}
#footer {
	display: flex;
	justify-content: center;
	margin-top: 20px;
}


@media only screen and (max-width: 750px) {
	.left-side, .right-side {
		width: 100%;
	}
	.el-form {
		flex-wrap: wrap;
	}
}
</style>
